<template>
  <view class="page">
    <!-- 个人信息列表 -->
    <view class="info-list">
      <!-- 头像 -->
      <view class="info-item" @click="open('photo')">
        <text class="label">头像</text>
        <view class="content avatar-wrapper">
          <image class="avatar" :src="user.photo" />
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      <!-- 昵称 -->
      <view class="info-item" @click="open('userName')">
        <text class="label">用户名</text>
        <view class="content">
          <text>{{user.userName}}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      <!-- 真实姓名 -->
      <view class="info-item" @click="open('nickName')">
        <text class="label">真实姓名</text>
        <view class="content">
          <text>{{user.nickName}}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      <!-- 性别 -->
      <view class="info-item" @click="open('sex')">
        <text class="label">性别</text>
        <view class="content">
          <text>{{setType(user.sex)}}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      <!-- 岗位 -->
      <view class="info-item" @click="open('postName')">
        <text class="label">岗位</text>
        <view class="content">
          <text>{{user.postName}}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      <!-- 手机号 -->
      <view class="info-item" @click="open('phone')">
        <text class="label">手机号</text>
        <view class="content">
          <text>{{user.phone}}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      <!-- 出生日期 -->
      <view class="info-item" @click="open('birthday')">
        <text class="label">出生日期</text>
        <view class="content">
          <text>{{formatDate(user.birthday)}}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      <!-- 家庭住址 -->
      <view class="info-item" @click="open('address')">
        <text class="label">家庭住址</text>
        <view class="content">
          <text>{{formattedData(user.address)}}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
    </view>
    <button class="bbutton" @click="updateUser()">确认</button>
    <!-- 弹出的下拉框（popup） -->
    <uni-popup ref="popup">
      <view class="popup-content1">
        <view v-if="popupType === 'photo'">
          <view class="popup-header">
			  <text style=" color: gray;">请输入头像</text>
		  </view>
		  <view class="popup-content">
			  <uni-file-picker
				limit="1" :del-icon="false" 
				disable-preview 
				:imageStyles="imageStyles"
				file-mediatype="image" 
				:auto-upload="false" 
				@select="upload"
				style="margin-top: 20px;">+</uni-file-picker>
		  </view>
          
        </view>
        <view v-if="popupType === 'userName'">
			<view class="popup-header">
				<text>请输入用户名：</text>
			</view>
			<view class="popup-content">
              <uni-easyinput v-model="user.userName" placeholder="请输入用户名" style="margin:20px; width: 90%;"/>
			</view>
        </view>
        <view v-if="popupType === 'nickName'">
		  <view class="popup-header">
            <text>请输入真实姓名：</text>
		  </view>
		  <view class="popup-content">
            <uni-easyinput v-model="user.nickName" placeholder="请输入真实姓名" style="margin:20px; width: 90%;"/>
		  </view>
        </view>
        <view v-if="popupType ==='sex'">
		  <view class="popup-header">
            <text>请选择性别：</text>
		  </view>
		  <view class="popup-content">
            <uni-data-checkbox v-model="user.sex" :localdata="sexList" style="margin: 20px;" />
		  </view>
        </view>
        <view v-if="popupType === 'postName'">
          <text>该内容是不能修改的！</text>
        </view>
        <view v-if="popupType === 'phone'">
		  <view class="popup-header">	
            <text>请输入手机号：</text>
		  </view>
		  <view class="popup-content">
            <uni-easyinput v-model="user.phone" placeholder="请输入手机号" style="margin:20px; width: 90%;"/>
		  </view>
        </view>
        <view v-if="popupType === 'birthday'">
			<view class="popup-header">
              <text>请输入出生日期：</text>
			</view>
		  <view class="popup-content">
		    <uni-datetime-picker
		    type="date" 
		    :clear-icon="false"
		    v-model="user.birthday" style="margin-top: 20px;"/>
		  </view>
        </view>
        <view v-if="popupType === 'address'">
		  <view class="popup-header">
            <text>请输入家庭住址：</text>
	      </view>
		  <view class="popup-content">
			<uni-easyinput v-model="user.address" placeholder="请输入家庭住址" style="margin:20px; width: 90%;"/>
		  </view>
        </view>
        <button class="abutton" @click="close()">确认</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sexList:[
        { value: 0, text: "男" },
        { value: 1, text: "女" }
      ],
      imageStyles: {
        width: '140px',
        height: '140px',
      },
      id: undefined,
      user: {},
      updateuser:{
        id: undefined,
        userName: undefined,
        password: undefined,
        nickName: undefined,
        roleId: undefined,
        postId: undefined,
        address: undefined,
        phone: undefined,
        sex: undefined,
        birthday: undefined,
        photo: undefined
      },
      popupVisible: false, // 控制弹出框的显示与隐藏
      popupType: '' // 记录点击的是哪一项，用于显示对应的内容
    };
  },
  created() {
    this.id = uni.getStorageSync("userIdInfo").userId;
    this.getUser();
  },
  methods: {
    close() {
      this.$refs.popup.close();
    },
    upload(e) {
      const tempFilePaths = e.tempFilePaths;
      uni.uploadFile({
        url: 'http://localhost:9191/files/upload', 
        filePath: tempFilePaths[0],
        name: 'file',
        success: res => {
          this.user.photo = res.data;
          console.log(this.formData.avatar, "头像")
        }
      })
    },
    successPhoto() {
      uni.showToast({
        title: '图片添加成功',
        icon:'success'
      });
    },
    open(type) {
      this.popupType = type;
      this.$refs.popup.open('top');
    },
    formattedData(data) {
      const address = data || '';
      return address.length > 6? address.slice(0, 6) + '...' : address;
    },
    setType(sex) {
      switch (sex) {
        case 0:
          return '男';
        case 1:
          return '女';
      }
    },
    getUser() {
      uni.request({
        url: 'http://127.0.0.1:1101/mesUserLogin/selectUserById',
        method: 'GET',
        data: {
          id: this.id
        },
        success: (res) => {
          if (res.data.code == 200) {
            this.user = res.data.data;
            this.$forceUpdate(); 
          } else {
            uni.showToast({
              title: '网络错误，请稍后再试',
              icon: 'none'
            });
          }
        }
      });
    },
    updateUser() {
      this.updateuser.id = this.user.id;
      this.updateuser.userName = this.user.userName;
      this.updateuser.password = this.user.password;
      this.updateuser.nickName = this.user.nickName;
      this.updateuser.roleId = this.user.roleId;
      this.updateuser.postId = this.user.postId;
      this.updateuser.address = this.user.address;
      this.updateuser.phone = this.user.phone;
      this.updateuser.sex = this.user.sex;
      this.updateuser.birthday = this.user.birthday;
      this.updateuser.photo = this.user.photo;
      uni.request({
        url: 'http://127.0.0.1:1101/mesUserLogin/updateUser',
        method: 'POST', 
        header: {
          'Content-Type': 'application/json' 
        },
        data: this.updateuser,
        success: (res) => {
          if (res.data.code == 200) {
            uni.showToast({
              title: '个人信息修改成功！',
              icon:'success'
            });
            uni.navigateBack();
          } else {
            uni.showToast({
              title: '个人信息修改失败！',
              icon: 'err'
            });
          }
        }
      });
    },
    showPopup(type) {
      this.popupType = type;
      this.popupVisible = true;
    },
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style>
page {
  height: 100%;
  background-color: #F8F8F8;
}

.page {
  background-color: #F8F8F8;
  min-height: 100%;
}

.info-list {
  margin: 0px 10px;
}

.info-item {
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding-left: 15px;
  box-sizing: border-box;
  margin-top: 8px;
  border-bottom: 1px solid #F5F5F5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 14px;
  color: #333333;
}

.content {
  display: flex;
  align-items: center;
}

.content text {
  font-size: 14px;
  color: #666666;
  margin-right: 5px;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 4px;
}

.popup-content1 {
  margin: 250px auto;
  padding: 20px;
  min-height: 200px;
  width: 85%;
  background-color: #ffffff;
  border-radius: 10px;
}

.abutton{
  width: 100px;
  height: 30px;
  line-height: 30px;
  background-color: #008CF8;
  position: absolute;  
  right: 20px;        
  bottom: 20px;      
  color: #ffffff;
}

.bbutton{
  width:60%;
  height: 40px;
  line-height: 40px;
  margin-top: 40px;
  background-color: #008CF8;
  color: #ffffff;
}
.popup-header{
	margin-bottom: 20px;
}
</style>
